<!--
 * @Description: 
 * @Author: Liu Kunpeng
 * @Date: 2021-07-12 19:27:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-30 16:18:31
-->
<template>
    <div>
        <h1>步态分析报告</h1>
        <h2>基本资料</h2>
        <div class="basicInfo">
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="8">姓名：<span class="info">{{listProp.dataMapOfGait.name}}</span></el-col>
            <el-col :span="8">性别：<span class="info">{{listProp.dataMapOfGait.sex}}</span></el-col>
            <el-col :span="8">检测日期：<span class="info">{{listProp.dataMapOfGait.year}}年
                {{listProp.dataMapOfGait.month}}月{{listProp.dataMapOfGait.day}}日</span></el-col>
        </el-row>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="8">身高：<span class="info">{{listProp.dataMapOfGait.heigth}}cm</span></el-col>
            <el-col :span="8">体重：<span class="info">{{listProp.dataMapOfGait.weigth}}kg</span></el-col>
            <el-col :span="8">联系电话：<span class="info">{{listProp.dataMapOfGait.phone}}</span></el-col>
        </el-row>
        <el-row :gutter="15" style="margin-bottom:20px">
            
            <el-col :span="12">检测模式：<span class="info">{{listProp.dataMapOfGait.gaitMode}}</span></el-col>
        </el-row>
        </div>
        <h2>基础数据</h2>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="10"><div>时间：{{listProp.dataMapOfGait.average_time}}</div></el-col>
            <el-col :span="10"><div>速度：{{listProp.dataMapOfGait.average_speed}}</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <table class="table_1">
                            <tr>
                                <td>参数(秒)</td>
                                <td>步宽</td>
                                <td>步高</td>
                                <td>步频</td>
                                <td>步幅</td>
                                <td>触地期<br>平均触底仰角</td>
                                <td>推进末期<br>平均推进俯角</td>
                            </tr>
                            <tr>
                                <td>左</td>
                                <td>{{listProp.dataMapOfGait.step_width_left}}</td> 
                                <td>{{listProp.dataMapOfGait.step_high_left}}</td>
                                <td>{{listProp.dataMapOfGait.step_frequency_left}}</td>
                                <td>{{listProp.dataMapOfGait.step_distance_left}}</td>
                                <td>{{listProp.dataMapOfGait.load_angle_left}}</td>
                                <td>{{listProp.dataMapOfGait.preswing_angle_left}}</td>
                            </tr>
                            <tr>
                                <td>右</td>
                                <td>{{listProp.dataMapOfGait.step_width_right}}</td>
                                <td>{{listProp.dataMapOfGait.step_high_right}}</td>
                                <td>{{listProp.dataMapOfGait.step_frequency_right}}</td>
                                <td>{{listProp.dataMapOfGait.step_distance_right}}</td>
                                <td>{{listProp.dataMapOfGait.load_angle_right}}</td>
                                <td>{{listProp.dataMapOfGait.preswing_angle_right}}</td>
                            </tr>
                </table>
            </el-col>
        </el-row>
        
        <h2>步态周期分析</h2>
        <el-row>
            <el-col :span="24">
                <div ref="charts_1" style="height:300px;width:100%"> </div>
            </el-col>
        </el-row>
        
        <el-row>
            <el-col :span="24">
            <table class="table_1">
                <tr>
                    <td>参数(秒)</td>
                    <td>步态周期时长</td>
                    <td>触地期时长</td>
                    <td>站立中期时长</td>
                    <td>推进期时长</td>
                    <td>摆动期时长</td>
                </tr>
                <tr>
                    <td>左</td>
                    <td>{{listProp.dataMapOfGait['MDGP-L']}}</td>
                    <td>{{listProp.dataMapOfGait['ADCPQ-L']}}</td>
                    <td>{{listProp.dataMapOfGait['ADMPQ-L']}}</td>
                    <td>{{listProp.dataMapOfGait['ADPPQ-L']}}</td>
                    <td>{{listProp.dataMapOfGait['ADSPQ-L']}}</td>
                </tr>
                <tr>
                    <td>右</td>
                    <td>{{listProp.dataMapOfGait['MDGP-R']}}</td>
                    <td>{{listProp.dataMapOfGait['ADCPQ-R']}}</td>
                    <td>{{listProp.dataMapOfGait['ADMPQ-R']}}</td>
                    <td>{{listProp.dataMapOfGait['ADPPQ-R']}}</td>
                    <td>{{listProp.dataMapOfGait['ADSPQ-R']}}</td>
                </tr>
            </table>
            </el-col>
        </el-row>
        <h2>步偏角分析</h2>
        <el-row>
            <el-col  :span="24">
                <h3 width="100%">步偏角：行走时脚尖方向，可判断内/外八字步态及严重程度</h3>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/step_angle.png" alt="步偏角" width="100%">
            </el-col>
        </el-row>
        

        <h3>最大步偏角出现阶段</h3>
        <el-row >
            <el-col :span="24">
                <p>左：</p><img src="@/assets/pdf_images/pressure.png" alt="步偏角出现时间" width="100%">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/pointer.png" alt="pointer" :class="pointerPosition(listProp.dataMapOfGait.max_FPA_left_phase)">
            </el-col>
            
        </el-row>
        
        <el-row >
            <el-col :span="24">
                <p>右：</p><img src="@/assets/pdf_images/pressure.png" alt="步偏角出现时间" width="100%">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/pointer.png" alt="pointer" :class="pointerPosition(listProp.dataMapOfGait.max_FPA_right_phase)">
            </el-col>
            
        </el-row>
        <h3>最小步偏角出现阶段</h3>
        <el-row >
            <el-col :span="24">
                <p>左：</p><img src="@/assets/pdf_images/pressure.png" alt="步偏角出现时间" width="100%">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/pointer.png" alt="pointer" :class="pointerPosition(listProp.dataMapOfGait.min_FPA_left_phase)" width="30px">
            </el-col>
            
        </el-row>
        <el-row >
            <el-col :span="24">
                <p>右：</p><img src="@/assets/pdf_images/pressure.png" alt="步偏角出现时间" width="100%">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/pointer.png" alt="pointer" :class="pointerPosition(listProp.dataMapOfGait.min_FPA_right_phase)">
            </el-col>
            
        </el-row>
        <el-row>
            <el-col :span="24">
                <table class="table_1">
                    <tr>
                        <td>参数(度)</td>
                        <td>平均步偏角</td>
                        <td>最大步偏角</td>
                        <td>最小步偏角</td>
                    </tr>
                    <tr>
                        <td>左</td>
                        <td>{{listProp.dataMapOfGait.FPA_left}}</td>
                        <td>{{listProp.dataMapOfGait.max_FPA_left}}</td>
                        <td>{{listProp.dataMapOfGait.min_FPA_left}}</td>
                    </tr>
                    <tr>
                        <td>右</td>
                        <td>{{listProp.dataMapOfGait.FPA_right}}</td>
                        <td>{{listProp.dataMapOfGait.max_FPA_right}}</td>
                        <td>{{listProp.dataMapOfGait.min_FPA_right}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        
        <h2>距下关节分析</h2>
        <el-row>
            <el-col :span="24">
                <h3><font color="#00B050"> 距下关节：由跟骨和距骨组成，既是保持足部稳定的枢纽，也是后足的力学中轴。承受并传导人体体重是它的主要作用。</font></h3>
            </el-col>
        </el-row>
        
        <el-row>
            <el-col :span="24">
                <img src="@/assets/pdf_images/subtalar_joint.png" alt="距下关节" width="100%"> 
            </el-col>
        </el-row>
        
        
        <h3>距下关节旋前范围(度)</h3>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="10"><div>左：{{listProp.dataMapOfGait.c_left_mean}}</div></el-col>
            <el-col :span="10"><div>右：{{listProp.dataMapOfGait.c_right_mean}}</div></el-col>
        </el-row>
         <h3>距下关节旋前时长(秒)</h3>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="10"><div>左：{{listProp.dataMapOfGait.t3_left_mean}}</div></el-col>
            <el-col :span="10"><div>右：{{listProp.dataMapOfGait.t3_right_mean}}</div></el-col>
        </el-row>
        <h2>COP曲线分析</h2>
        <el-row>
            <el-col :span="12">
                <img src="@/assets/pdf_images/cop.png" alt="cop" width="330px">
            </el-col>
            <el-col :span="12">
                <div style="width:100%;height:400px" ref="cop_line">
                    <!-- COP曲线分析 -->
                </div>
            </el-col>
        </el-row>
        
        <h2>足底压力分析</h2>
        <el-row>
            <el-col>
                <div style="width:100%;height:300px" ref="charts_2"> </div>
            </el-col>
        </el-row>
        <h2>建议</h2>
        <el-row>
            <el-col >
                <div class="suggest">
                    <el-input id="gait" type="textarea" :rows="10" v-model="suggest.suggestionOfGait" class="suginput"
                        placeholder="请填写步态分析建议" resize="none"></el-input>
                </div>
            </el-col>
            
        </el-row>
        
        <div>
            <div class="tagBox">
                <el-tag class="tags" :key="item.tag" v-for="(item,index) in dynamicGaitTags" closable :disable-transitions="true" @close="handleGaitClose(tag)" @click="selectGaitTag(index)"> {{dynamicGaitTags[index]}} </el-tag>
                <el-input class="input-new-tag" v-if="inputGaitVisible" v-model="inputGaitValue" ref="saveGaitTagInput" size="medium" 
                    @keyup.enter.native="handleGaitInputConfirm"
                    @blur="handleGaitInputConfirm" > </el-input>
                <el-button v-else class="button-new-tag" size="medium" @click="showGaitInput">+ New Tag</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <h1>平衡测试报告</h1>
        <h2>基本资料</h2>
        <div class="basicInfo">
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="8">姓名：<span class="info">{{listProp.dataMapOfBalance.name}}</span></el-col>
            <el-col :span="8">性别：<span class="info">{{listProp.dataMapOfBalance.sex}}</span></el-col>
            <el-col :span="8">出生日期：<span class="info">{{listProp.dataMapOfBalance.year}}年{{listProp.dataMapOfBalance.month}}月{{listProp.dataMapOfBalance.day}}日</span></el-col>
        </el-row>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="8">身高：<span class="info">{{listProp.dataMapOfBalance.heigth}}cm</span></el-col>
            <el-col :span="8">体重：<span class="info">{{listProp.dataMapOfBalance.weigth}}kg</span></el-col>
            <el-col :span="8">联系电话：<span class="info">{{listProp.dataMapOfBalance.phone}}</span></el-col>
        </el-row>
        <el-row :gutter="15" style="margin-bottom:20px">
            
            <el-col :span="12">检测模式：<span class="info">{{listProp.dataMapOfBalance.balanceMode}}</span></el-col>
        </el-row>
        </div>
        <h2>整体平衡能力分析</h2>
        <el-row :gutter="15" style="margin-bottom:20px">
            <el-col :span="12">
                <img src="@/assets/pdf_images/balance.png" alt="平衡测试">
            </el-col>
            <el-col :span="12">
                <div class="graph" ref="overall_balance">
                    <!-- 平衡能力分析图 -->
                </div>
            </el-col>
        </el-row>
        
        <el-row style="margin-bottom:20px" :gutter="100">
            <el-col :span="10">
                平均百分比
                <table class="table_1" style="width:300px">
                    <tr>
                        <td>参数(%)</td>
                        <td>左</td>
                        <td>右</td>
                    </tr>
                    <tr>
                        <td>平均百分比</td>
                        <td>{{formatPercent(listProp.pictrueData.balance_percentage_left)}}</td>
                        <td>{{formatPercent(listProp.pictrueData.balance_percentage_right) }}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="10">
                平均压力值
                <table class="table_1" width="300px">
                    <tr>
                        <td>参数</td>
                        <td>左</td>
                        <td>右</td>
                    </tr>
                    <tr>
                        <td>平均压力值</td>
                        <td>{{listProp.pictrueData.balance_pressure_left.toFixed(2)}}</td>
                        <td>{{listProp.pictrueData.balance_pressure_right.toFixed(2)}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <h2>偏移量分析</h2>
        <el-row style="margin-bottom:20px">
            <el-col :span="12">
                <img src="@/assets/pdf_images/balancefmb.png" alt="偏移量分析">
            </el-col>
            <!-- <el-col :xs="9" :md="12" :span="12">
                <div class="graph" ref="offset_sys"></div>
            </el-col> -->
        </el-row>
        <el-row style="margin-bottom:40px" :gutter="20">
            <el-col :span="8">
                <table class="table_1" style="width:280px">
                    <th>前足</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_fore1_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_fore1_right)}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="8">
                <table class="table_1" style="width:280px">
                    <th>后足</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_hind_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_hind_right)}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="8">
                <table class="table_1" style="width:280px">
                    <th>中足</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_mid_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_mid_right)}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px" :gutter="20">
            <el-col :span="12">
                <img src="@/assets/pdf_images/balancefb.png" alt="平衡前后">
            </el-col>
            <el-col :span="12">
                <div class="graph" ref="offset_fb">
                    <!-- 散点图 -->
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:40px" :gutter="40">
            <el-col :span="12">
                <table class="table_1" style="width:300px">
                    <th>前足</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_fore2_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_fore2_right)}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="12">
                <table class="table_1"  style="width:300px">
                    <th>后足</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_hind_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_hind_right)}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px">
            <el-col :span="12">
                <img src="@/assets/pdf_images/balancelf.png" alt="平衡左右">
            </el-col>
            <el-col :span="12">
                <div class="graph" ref="offset_io">
                    <!-- 散点图 -->
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:40px" :gutter="40">
            <el-col :span="12">
                <table class="table_1" style="width:300px">
                    <th>内侧</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_inside_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_inside_right)}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="12">
                <table class="table_1" style="width:300px">
                    <th>外侧</th>
                    <tr>
                        <td>参数(%)</td>
                        <td>区域比</td>
                    </tr>
                    <tr>
                        <td>左脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_outside_left)}}</td>
                    </tr>
                    <tr>
                        <td>右脚</td>
                        <td>{{formatPercent(listProp.pictrueData.offset_outside_right)}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <h2>建议</h2>
        <el-row>
            <el-col>
                <div class="suggest">
                    <el-input id="balance" type="textarea" :rows="10" v-model="suggest.suggestionOfBalance" class="suginput"
                    placeholder="请填写平衡分析建议" resize="none"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col >
                <div>
                    <div class="tagBox">
                        <el-tag class="tags" :key="item.tag" v-for="(item,index) in dynamicBalanceTags" closable :disable-transitions="true" @close="handleBalanceClose(tag)" @click="selectBalanceTag(index)"> {{dynamicBalanceTags[index]}} </el-tag>
                        <el-input class="input-new-tag" v-if="inputBalanceVisible" v-model="inputBalanceValue" ref="saveBalanceTagInput" size="medium" 
                            @keyup.enter.native="handleBalanceInputConfirm"
                            @blur="handleBalanceInputConfirm" > </el-input>
                        <el-button v-else class="button-new-tag" size="medium" @click="showBalanceInput">+ New Tag</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-button id="submit" type="primary" class="submitBtn" @click="submitSuggest()">提交</el-button>
            </el-col>
        </el-row>
        
        
    </div> 
</template>

<script>
import { percentage } from '@/utils/validate'
import * as echarts from 'echarts'
import { sendWSPush } from '@/assets/js/websocket'
export default {
    data(){
        return{
            position:4,
            suggest: {
                id:0,
                suggestionOfGait:"",
                suggestionOfBalance:"",
                message:"",
            },
            dynamicGaitTags:[],
            dynamicBalanceTags:[],
            inputGaitValue: '',
            inputGaitVisible: false,
            inputBalanceValue: '',
            inputBalanceVisible: false,

        }

    },
    props:['listProp'],
    fatherMethod:{
        type: Function,
        default: null
    },
    
    
    methods: {
        handleGaitClose(tag) {
            this.dynamicGaitTags.splice(this.dynamicGaitTags.indexOf(tag), 1);
        },
        handleBalanceClose(tag) {
            this.dynamicBalanceTags.splice(this.dynamicBalanceTags.indexOf(tag), 1);
        },
        showGaitInput() {
            this.inputGaitVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveGaitTagInput.$refs.input.focus();
            });
        },
        showBalanceInput() {
            this.inputBalanceVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveBalanceTagInput.$refs.input.focus();
            });
        },
        handleGaitInputConfirm() {
            let inputGaitValue = this.inputGaitValue;
            if (inputGaitValue) {
                this.dynamicGaitTags.push(inputGaitValue);
            }
            this.inputGaitVisible = false;
            this.inputGaitValue = '';
        },
        handleBalanceInputConfirm() {
            let inputBalanceValue = this.inputBalanceValue;
            if (inputBalanceValue) {
                this.dynamicBalanceTags.push(inputBalanceValue);
            }
            this.inputBalanceVisible = false;
            this.inputBalanceValue = '';
        },
        selectGaitTag(index){
            this.suggest.suggestionOfGait += this.dynamicGaitTags[index];
        },
        selectBalanceTag(index){
            this.suggest.suggestionOfBalance += this.dynamicBalanceTags[index]; 
        },
        submitSuggest(){
            this.suggest.id = this.listProp.dataMapOfBalance.id
            window.localStorage.setItem("GaitTags",JSON.stringify(this.dynamicGaitTags))
            window.localStorage.setItem("BalanceTags",JSON.stringify(this.dynamicBalanceTags))
            const suggestGait = this.suggest.suggestionOfGait
            const suggestBalance = this.suggest.suggestionOfBalance
            if(suggestGait === "" || suggestBalance === "")
            {
                this.$message.warning("请填写建议")
                return;
            }
            sendWSPush(this.suggest)
            this.$confirm('操作已完成, 是否返回首页?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
                }).then(() => {
                    this.$router.push({path:'/home', params:Date.now()})
                })
        },
        pointerPosition(position){
            if(position === "1"){
                return 'pointerPosition1'
            }else if(position === "2"){
                return 'pointerPosition2'
            }else if(position === "3"){
                return 'pointerPosition3'
            }else if(position === "4"){
                return 'pointerPosition4'
            }
        },
        
        drawImg(){  //标准左右堆叠柱状图
            var _data = this.listProp.pictrueData
            var load = [parseFloat(_data.load_angle_right_mean).toFixed(2)*100,parseFloat(_data.loading_ratio_left_mean).toFixed(2)*100,12]
            var footFlat = [parseFloat(_data.footFlat_ratio_right_mean).toFixed(2)*100,parseFloat(_data.footFlat_ratio_left_mean).toFixed(2)*100,38]
            var pe_swing = [parseFloat(_data.pre_swing_ratio_right_mean).toFixed(2)*100,parseFloat(_data.pre_swing_ratio_left_mean).toFixed(2)*100,12]
            var swing_ra = [parseFloat(_data.swing_ratio_right_mean).toFixed(2)*100,parseFloat(_data.swing_ratio_left_mean).toFixed(2)*100,38]
            var options_1 = {
                tooltip: {
                    show: false,
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [ '右', '左','标准']
                },
                series: [
                    {
                        clickable:false,
                        name: 'load_ratio',
                        type: 'bar',
                        stack: 'total',
                        color: '#D8C542',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: load
                    },
                    {
                        clickable:false,
                        name: 'foot_flat',
                        type: 'bar',
                        stack: 'total',
                        color: '#7FC047',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: footFlat
                    },
                    {
                        clickable:false,
                        name: 'pre_swing',
                        type: 'bar',
                        stack: 'total',
                        color: '#4094D2',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: pe_swing
                    },
                    {
                        clickable:false,
                        name: 'swing_ratio',
                        type: 'bar',
                        stack: 'total',
                        color: '#996BAA',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: swing_ra
                    },  
                    
                ]
            }
            var charts_1 = echarts.init(this.$refs.charts_1)
            charts_1.setOption(options_1)
        },
        drawPressure(){ //足底压力分析
            var data = this.listProp.pictrueData
            var data_l = new Array()
            var data_r = new Array()
            var data_left = new Array()
            data_left.push(data.pressure_mean_left_1,data.pressure_mean_left_2,data.pressure_mean_left_3,data.pressure_mean_left_4,data.pressure_mean_left_5,data.pressure_mean_left_6,data.pressure_mean_left_7,data.pressure_mean_left_8,data.pressure_mean_left_9)
            data_left.forEach(e=>{
                data_l.push(parseFloat(e).toFixed(2))
            })
            var data_right = new Array()
            data_right.push(data.pressure_mean_righ_1,data.pressure_mean_righ_2,data.pressure_mean_righ_3,data.pressure_mean_righ_4,data.pressure_mean_righ_5,data.pressure_mean_righ_6,data.pressure_mean_righ_7,data.pressure_mean_righ_8,data.pressure_mean_righ_9)
            data_right.forEach(e=>{
                data_r.push(parseFloat(e).toFixed(2))
            })
            var options_2 = {
                legend: {
                    data: ['左脚', '右脚'],
                    selectedMode:false
                },
                xAxis:[{
                    type:'category',
                    data:['节点一','节点二','节点三','节点四','节点五','节点六','节点七','节点八','节点九'],
                    
                }],
                yAxis:[{
                    type: 'value',
                    name: '平均压力值',
                }],
                series: [
                    {
                        name: '左脚',
                        type: 'bar',
                        data: data_l,
                        
                        label:{
                            show:true,
                            position:'top',
                        }
                    },
                    {
                        name: '右脚',
                        type: 'bar',
                        data: data_r,
                        label:{
                            show:true,
                            position:'top',
                        }
                    },
                    
                ]
            }
            var charts_2 = echarts.init(this.$refs.charts_2)
            charts_2.setOption(options_2)
        },
        drawCopLine(){
            if(this.listProp.pictrueData.cop_y_left){
                var len = this.listProp.pictrueData.cop_y_left.length
            }
            var data_left = new Array()
            var data_right = new Array()
            for(var i = 0;i < len;i++){
                data_left.push([this.listProp.pictrueData.cop_x_left[i],this.listProp.pictrueData.cop_y_left[i]])
                data_right.push([this.listProp.pictrueData.cop_x_right[i],this.listProp.pictrueData.cop_y_right[i]])
            }
           
            var cop_line_options = {
                title: {
                    text: 'COP曲线分析',
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },

                legend: {
                    data: ['左脚', '右脚'],
                    left: 'center',
                    bottom: 10
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value}'
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '左脚',
                        type: 'scatter',

                        data: data_left,
                    },
                    {
                        name: '右脚',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: data_right,
                    }
                ]
            }
            var cop_line = echarts.init(this.$refs.cop_line)
            cop_line.setOption(cop_line_options)
        },
        drawOverallBal(){
            var _data = this.listProp.pictrueData
            var data_left = new Array()
            var data_right = new Array()
            var len = _data.balance_x_right.length
            console.log(len);
            for(var i = 0;i < len; i++){
                data_left.push([_data.balance_x_left[i],_data.balance_y_left[i]])
                data_right.push([_data.balance_x_right[i],_data.balance_y_right[i]])
            }
            var overall_balance_options = {
               
                title: {
                    text: '整体平衡能力分析',
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },

                legend: {
                    data: ['左脚', '右脚'],
                    left: 'center',
                    bottom: 10
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} s'
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '左脚',
                        type: 'scatter',

                        data: data_left,
                    },
                    {
                        name: '右脚',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: data_right,
                    }
                ]
            }
            var overall_balance = echarts.init(this.$refs.overall_balance)  //整体平衡散点图
            overall_balance.setOption(overall_balance_options)
        },
        drawOffsetSys(){
            var offset_sys_options = {
                title: {
                    text: '整体平衡能力分析',
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },

                legend: {
                    data: ['左脚', '右脚'],
                    left: 'center',
                    bottom: 10
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} s'
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '左脚',
                        type: 'scatter',

                        data: [[-161.2, 51.6], [-167.5, 59.0], [-159.5, 49.2], [-157.0, 63.0], [-155.8, 53.6],
                            [-170.0, 59.0], [-159.1, 47.6], [-166.0, 69.8]
                        ],
                    },
                    {
                        name: '右脚',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4]
                        ],
                    }
                ]
            }
            var offset_sys = echarts.init(this.$refs.offset_sys)    //偏移量分析前中后散点图
            offset_sys.setOption(offset_sys_options)
        },
        drawOffsetFB(){
            var _data = this.listProp.pictrueData
            var data_fore = new Array()
            var data_hind = new Array()
            var len = _data.hind_x.length
            for(var i=0; i<len; i++){
                data_fore.push([_data.fore_x[i],_data.fore_y[i]])
                data_hind.push([_data.hind_x[i],_data.hind_y[i]])
            }
            var offset_fb_options = {
                title: {
                    text: '整体平衡能力分析',
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },

                legend: {
                    data: ['前足', '后足'],
                    left: 'center',
                    bottom: 10
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} s'
                        },
                        max:function(value){return value.max}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '前足',
                        type: 'scatter',

                        data: data_fore,
                    },
                    {
                        name: '后足',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: data_hind,
                    }
                ]
            }
            var offset_fb = echarts.init(this.$refs.offset_fb)      //偏移量分析前后散点图
            offset_fb.setOption(offset_fb_options)
        },
        drawOffsetIO(){
            var _data = this.listProp.pictrueData
            var data_inside = new Array()
            var data_outside = new Array()
            var len = _data.inside_y.length
            for(var i=0; i<len; i++){
                data_inside.push([_data.inside_x[i],_data.inside_y[i]])
                data_outside.push([_data.outside_x[i],_data.outside_y[i]])
            }
            var offset_io_options = {
                
                title: {
                    text: '整体平衡能力分析',
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },

                legend: {
                    data: ['内侧', '外侧'],
                    left: 'center',
                    bottom: 10
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} s'
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '内侧',
                        type: 'scatter',

                        data: data_inside,
                    },
                    {
                        name: '外侧',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: data_outside,
                    }
                ]
            }
            var offset_io = echarts.init(this.$refs.offset_io)      //偏移量分析内外散点图
            offset_io.setOption(offset_io_options)
        },
        formatPercent(val){
            return percentage(val)
        },
    },

    mounted() {
        var gaitTags = window.localStorage.getItem("GaitTags");
        var balanceTags = window.localStorage.getItem("BalanceTags");
        if(gaitTags !== null ){
            this.dynamicGaitTags = JSON.parse(gaitTags)
        }
        if(balanceTags !== null ){
            this.dynamicBalanceTags = JSON.parse(balanceTags)
        }
        this.drawImg()
        this.drawPressure()
        this.drawCopLine()
        this.drawOverallBal()
        //this.drawOffsetSys()
        this.drawOffsetFB()
        this.drawOffsetIO()
    },

}
</script>

<style lang="less" scoped>

el-row{
    margin-bottom: 30px;
}
.table_1{
    width:100%;
    margin-right: 30px;
    min-height: 25px; 
    line-height: 25px; 
    text-align: center; 
    border-collapse: collapse; 
    padding:2px;
    tr,td{
        width: 130px;
        height: 54px;
        border: solid 1px;
    }
}
h2{
    color: #6096E6;
}
h3{
    color: #00B050;
    text-decoration:underline;
}
.suggest{
    
    border: solid black 1px;
    height: 314px;
    .suginput{
        font-weight: 600;
        font-size: 20px;
    }
    
}
.submitBtn{
        float: right;
        margin-top: 20px;
        margin-bottom: 50px;
        margin-left: 10px;
    }
.tagBox{
    margin-top: 10px;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
.tags {
    margin-right: 10px;
}
h1 {
    text-align: center;
    color: #6096E7;
}
.graph{
    border: black 1px solid;
    height: 400px;
    width: 100%;
}
.basicInfo{
    background-color: #eaeff8;
    padding: 10px;
}
el-row{
    margin-top: 100px;
}
.pointerPosition1{
    width: 30px;
    height: 30px;
    position:relative;
    left: 3%;
}
.pointerPosition2{
    width: 30px;
    height: 30px;
    position:relative;
    left: 25%;
}
.pointerPosition3{
    width: 30px;
    height: 30px;
    position:relative;
    left: 55%;
}
.pointerPosition4{
    width: 30px;
    height: 30px;
    position:relative;
    left: 80%;
}
</style>


